<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.LayerEffect.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.LayerEffect.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.LayerEffect.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;레이어를&nbsp;보여주고&nbsp;숨겨주거나&nbsp;특정&nbsp;애니메이션&nbsp;효과를&nbsp;적용하는&nbsp;컴포넌트
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	LayerEffect&nbsp;컴포넌트는&nbsp;레이어를&nbsp;애니메이션&nbsp;효과를&nbsp;적용하여&nbsp;보여주거나&nbsp;숨기고,&nbsp;강조하는&nbsp;컴포넌트.
	@class&nbsp;jindo.LayerEffect
	@extends&nbsp;jindo.Component
	@uses&nbsp;jindo.Transition
	
	@keyword&nbsp;layer,&nbsp;effect,&nbsp;animation,&nbsp;레이어,&nbsp;효과,&nbsp;애니메이션
**/
jindo.LayerEffect&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.LayerEffect.prototype&nbsp;*/
	
	/**
		LayerEffect&nbsp;컴포넌트를&nbsp;초기화한다.
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;효과를&nbsp;적용할&nbsp;엘리먼트
	**/
	$init&nbsp;:&nbsp;function(el)&nbsp;{
		this.setLayer(el);
		var&nbsp;self&nbsp;=&nbsp;this;
		this._htTransitionGetterSetter&nbsp;=&nbsp;{
			getter:&nbsp;function(sKey){
				return&nbsp;jindo.$Element(self._el)[sKey]();
			},
			setter:&nbsp;function(sKey,&nbsp;nValue)&nbsp;{
				jindo.$Element(self._el)[sKey](parseFloat(nValue));
			}
		};
	},
	
	/**
		보여주고&nbsp;숨겨줄&nbsp;레이어&nbsp;객체를&nbsp;가져온다.
		
		@method&nbsp;getLayer
		@return&nbsp;{HTMLElement}&nbsp;
	**/
	getLayer&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._el;
	},
	
	/**
		보여주고&nbsp;숨겨줄&nbsp;레이어&nbsp;객체를&nbsp;설정한다.
		
		@method&nbsp;setLayer
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;레이어&nbsp;엘리먼트
		@return&nbsp;{this}
	**/
	setLayer&nbsp;:&nbsp;function(el)&nbsp;{
		this._el&nbsp;=&nbsp;jindo.$(el);
		this._wel&nbsp;=&nbsp;jindo.$Element(el);
		
		var&nbsp;elToMeasure&nbsp;=&nbsp;this._el.cloneNode(true);
		var&nbsp;welToMeasure&nbsp;=&nbsp;jindo.$Element(elToMeasure);
		welToMeasure.opacity(0);
		this._wel.after(welToMeasure);
		welToMeasure.show();
		//css&nbsp;position
		this._sLayerCSSPosition&nbsp;=&nbsp;welToMeasure.css(&quot;position&quot;);
		
		var&nbsp;htOffset&nbsp;=&nbsp;welToMeasure.offset();
		welToMeasure.css({
			position&nbsp;:&nbsp;&quot;absolute&quot;,
			top&nbsp;:&nbsp;&quot;0px&quot;,
			left&nbsp;:&nbsp;&quot;0px&quot;
		});
		
		//css&nbsp;left,&nbsp;top
		var&nbsp;htNewOffset&nbsp;=&nbsp;welToMeasure.offset();
		this._sLayerCSSLeft&nbsp;=&nbsp;htOffset.left&nbsp;-&nbsp;htNewOffset.left&nbsp;+&nbsp;&quot;px&quot;;
		this._sLayerCSSTop&nbsp;=&nbsp;htOffset.top&nbsp;-&nbsp;htNewOffset.top&nbsp;+&nbsp;&quot;px&quot;;
		this._sLayerBGColor&nbsp;=&nbsp;welToMeasure.css(&quot;backgroundColor&quot;);
		
		//layer&nbsp;size
		this._nLayerWidth&nbsp;=&nbsp;welToMeasure.width();
		this._nLayerHeight&nbsp;=&nbsp;welToMeasure.height();
		welToMeasure.width(this._nLayerWidth);
		welToMeasure.height(this._nLayerHeight);
		
		//css&nbsp;width,&nbsp;height,&nbsp;overflow
		this._sLayerCSSWidth&nbsp;=&nbsp;welToMeasure.css(&quot;width&quot;);
		this._sLayerCSSHeight&nbsp;=&nbsp;welToMeasure.css(&quot;height&quot;);
		this._sLayerCSSOverflowX&nbsp;=&nbsp;this._wel.css(&quot;overflowX&quot;);
		this._sLayerCSSOverflowY&nbsp;=&nbsp;this._wel.css(&quot;overflowY&quot;);
		this._sLayerCSSFontSize&nbsp;=&nbsp;this._wel.css(&quot;fontSize&quot;);
		this._sLayerCSSFontSizeUnit&nbsp;=&nbsp;this._sLayerCSSFontSize.match(/^\-?[0-9\.]+(%|px|pt|em)?$/i)[1];
		welToMeasure.css({
			&quot;overflow&quot;&nbsp;:&nbsp;&quot;hidden&quot;,
			&quot;width&quot;&nbsp;:&nbsp;0,
			&quot;height&quot;&nbsp;:&nbsp;0
		});
		
		this._nSlideMinWidth&nbsp;=&nbsp;welToMeasure.width()&nbsp;+&nbsp;1;
		this._nSlideMinHeight&nbsp;=&nbsp;welToMeasure.height()&nbsp;+&nbsp;1;&nbsp;
		welToMeasure.leave();
			
		return&nbsp;this;
	},
	
	_transform&nbsp;:&nbsp;function(){
		this._wel.css({
			&quot;overflowX&quot;:&nbsp;&quot;hidden&quot;,
			&quot;overflowY&quot;:&nbsp;&quot;hidden&quot;
		});
	},
	
	_restore&nbsp;:&nbsp;function()&nbsp;{
		this._wel.css({
			&quot;position&quot;:&nbsp;this._sLayerCSSPosition,
			&quot;overflowX&quot;:&nbsp;this._sLayerCSSOverflowX,
			&quot;overflowY&quot;:&nbsp;this._sLayerCSSOverflowY
		});
	},
	
	_fireEventBefore&nbsp;:&nbsp;function(bTransform)&nbsp;{
		if&nbsp;(bTransform)&nbsp;{
			this._transform();
		}
		/**
			애니메이션&nbsp;효과가&nbsp;시작하기&nbsp;직전
			
			@event&nbsp;before
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;애니메이션이&nbsp;적용된&nbsp;레이어&nbsp;엘리먼트
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;애니메이션&nbsp;효과가&nbsp;시작되지&nbsp;않음
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oLayerEffect.attach(&quot;before&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		return&nbsp;this.fireEvent(&quot;before&quot;,&nbsp;{
			elLayer&nbsp;:&nbsp;this.getLayer()
		});
	},
	
	_fireEventAppear&nbsp;:&nbsp;function()&nbsp;{
		/**
			애니메이션&nbsp;효과가&nbsp;적용되어&nbsp;숨겨져있던&nbsp;레이어가&nbsp;보이기&nbsp;시작한&nbsp;시점&nbsp;(보여주기&nbsp;효과에서만&nbsp;발생)
			
			@event&nbsp;appear
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;애니메이션이&nbsp;적용된&nbsp;레이어&nbsp;엘리먼트
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oLayerEffect.attach(&quot;appear&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;appear&quot;,&nbsp;{
			elLayer&nbsp;:&nbsp;this.getLayer()
		});
	},
	
	_fireEventEnd&nbsp;:&nbsp;function()&nbsp;{
		this._restore();
		/**
			애니메이션&nbsp;효과가&nbsp;종료된&nbsp;직후
			
			@event&nbsp;end
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elLayer&nbsp;애니메이션이&nbsp;적용된&nbsp;레이어&nbsp;엘리먼트
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oLayerEffect.attach(&quot;end&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;end&quot;,&nbsp;{
			elLayer&nbsp;:&nbsp;this.getLayer()
		});
	},
	
	_getTransition&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;(this._oTransition)&nbsp;?&nbsp;this._oTransition&nbsp;:&nbsp;this._oTransition&nbsp;=&nbsp;new&nbsp;jindo.Transition({bCorrection&nbsp;:&nbsp;true});
	},
	
	_afterHide&nbsp;:&nbsp;function()&nbsp;{
		this._wel.hide().opacity(1);
		this._wel.css({
			&quot;top&quot;:&nbsp;this._sLayerCSSTop,
			&quot;left&quot;:&nbsp;this._sLayerCSSLeft,
			&quot;width&quot;:&nbsp;this._sLayerCSSWidth,
			&quot;height&quot;:&nbsp;this._sLayerCSSHeight,
			&quot;fontSize&quot;:&nbsp;this._sLayerCSSFontSize
		});
	},
	
	_onShowTransitionEnd&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
		this._getTransition().detach(&quot;end&quot;,&nbsp;arguments.callee);
		this._fireEventEnd();
	},
	
	_onHideTransitionEnd&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
		this._getTransition().detach(&quot;end&quot;,&nbsp;arguments.callee);
		this._afterHide();
		this._fireEventEnd();
	},
	
	_getOption&nbsp;:&nbsp;function(htDefault,&nbsp;ht)&nbsp;{
		for&nbsp;(var&nbsp;s&nbsp;in&nbsp;ht)&nbsp;{
			htDefault[s]&nbsp;=&nbsp;ht[s];
		}
		return&nbsp;htDefault;
	},
	
	/**
		레이어를&nbsp;fadeIn하여&nbsp;보여준다.
		레이어의&nbsp;투명도를&nbsp;높여&nbsp;서서히&nbsp;보여지는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;fadeIn
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.fadeIn();
			oLayerEffect.fadeIn({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	fadeIn&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible()&nbsp;&amp;&amp;&nbsp;this._wel.opacity()&nbsp;&gt;&nbsp;0;
		
		if&nbsp;(bVisible)&nbsp;{
			htOption.nDuration&nbsp;*=&nbsp;((1&nbsp;-&nbsp;this._wel.opacity())&nbsp;/&nbsp;1);
		}&nbsp;else&nbsp;{
			this._wel.opacity(0);
			this._wel.show();
		}
		
		if&nbsp;(htOption.nDuration&nbsp;&gt;&nbsp;0)&nbsp;{
			this._fireEventBefore(true);
			var&nbsp;self&nbsp;=&nbsp;this,
				oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
			oTransition.attach({
				playing&nbsp;:&nbsp;function(oCustomEvent){
					if&nbsp;(oCustomEvent.nStep&nbsp;===&nbsp;1)&nbsp;{
						this.detach(&quot;playing&quot;,&nbsp;arguments.callee);
						if&nbsp;(!bVisible)&nbsp;{
							self._fireEventAppear();
						}
					}
				},
				end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this)
			}).queue(htOption.nDuration,&nbsp;this._wel.$value(),&nbsp;{
				&quot;@opacity&quot;&nbsp;:&nbsp;jindo.Effect.linear(1)
			});
			
			if&nbsp;(htOption.fCallback)&nbsp;{
				oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
			}
			oTransition.start();
		}
		return&nbsp;this;
	},
	
	/**
		레이어를&nbsp;fadeOut하여&nbsp;숨긴다.
		레이어의&nbsp;투명도를&nbsp;줄여&nbsp;서서히&nbsp;사려져가는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;fadeOut
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.fadeOut();
			oLayerEffect.fadeOut({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	fadeOut&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible()&nbsp;&amp;&amp;&nbsp;this._wel.opacity()&nbsp;&gt;&nbsp;0;
		
		if&nbsp;(bVisible)&nbsp;{
			this._fireEventBefore();
			
			htOption.nDuration&nbsp;*=&nbsp;(this._wel.opacity()&nbsp;/&nbsp;1);
			var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
			oTransition.attach({
				end&nbsp;:&nbsp;jindo.$Fn(this._onHideTransitionEnd,&nbsp;this).bind(this)
			}).queue(htOption.nDuration,&nbsp;this._wel.$value(),&nbsp;{
				&quot;@opacity&quot;&nbsp;:&nbsp;jindo.Effect.linear(0)
			});
			
			if&nbsp;(htOption.fCallback)&nbsp;{
				oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
			}
			oTransition.start();
		}&nbsp;
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;slideDown하여&nbsp;보여준다.
		레이어의&nbsp;높이를&nbsp;높여&nbsp;미끄러져&nbsp;내려가는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;slideDown
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.slideDown();
			oLayerEffect.slideDown({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	slideDown&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible();
		
		if&nbsp;(Math.ceil(this._wel.height())&nbsp;&lt;&nbsp;this._nLayerHeight)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				if&nbsp;(!bVisible)&nbsp;{
					this._wel.css(&quot;height&quot;,&nbsp;0).show().height(this._nSlideMinHeight);
				}&nbsp;else&nbsp;{
					htOption.nDuration&nbsp;=&nbsp;Math.ceil(htOption.nDuration&nbsp;*&nbsp;((this._nLayerHeight&nbsp;-&nbsp;this._wel.height())&nbsp;/&nbsp;(this._nLayerHeight&nbsp;-&nbsp;this._nSlideMinHeight)));
				}
				
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				oTransition.attach({
					playing&nbsp;:&nbsp;function(oCustomEvent){
						if&nbsp;(oCustomEvent.nStep&nbsp;===&nbsp;1)&nbsp;{
							this.detach(&quot;playing&quot;,&nbsp;arguments.callee);
							if&nbsp;(!bVisible)&nbsp;{
								self._fireEventAppear();
							}
						}
					},
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;slideUp하여&nbsp;숨긴다.
		레이어의&nbsp;높이를&nbsp;줄여&nbsp;미끄러져&nbsp;올라가는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;slideUp
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.slideUp();
			oLayerEffect.slideUp({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	slideUp&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible();
			
		if&nbsp;(bVisible)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				htOption.nDuration&nbsp;=&nbsp;Math.ceil(htOption.nDuration&nbsp;*&nbsp;(this._wel.height()&nbsp;/&nbsp;this._nLayerHeight));
				
				var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onHideTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nSlideMinHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;grow하여&nbsp;보여준다.
		레이어의&nbsp;높이와&nbsp;너비를&nbsp;동시에&nbsp;넓혀&nbsp;늘어나는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;grow
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.grow();
			oLayerEffect.grow({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	grow&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible();
		
		if&nbsp;(Math.ceil(this._wel.height())&nbsp;&lt;&nbsp;this._nLayerHeight)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				if&nbsp;(!bVisible)&nbsp;{
					this._wel.css({
						width&nbsp;:&nbsp;0,
						height&nbsp;:&nbsp;0
					}).show().width(this._nSlideMinWidth).height(this._nSlideMinHeight);
				}&nbsp;else&nbsp;{
					htOption.nDuration&nbsp;=&nbsp;Math.ceil(htOption.nDuration&nbsp;*&nbsp;((this._nLayerHeight&nbsp;-&nbsp;this._wel.height())&nbsp;/&nbsp;(this._nLayerHeight&nbsp;-&nbsp;this._nSlideMinHeight)));
				}
				
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				oTransition.attach({
					playing&nbsp;:&nbsp;function(oCustomEvent){
						if&nbsp;(oCustomEvent.nStep&nbsp;===&nbsp;1)&nbsp;{
							this.detach(&quot;playing&quot;,&nbsp;arguments.callee);
							if&nbsp;(!bVisible)&nbsp;{
								self._fireEventAppear();
							}
						}
					},
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					width:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerWidth),
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;shrink하여&nbsp;숨긴다.
		레이어의&nbsp;높이와&nbsp;너비를&nbsp;동시에&nbsp;줄여&nbsp;찌그러뜨리는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;shrink
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.shrink();
			oLayerEffect.shrink({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	shrink&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible();
			
		if&nbsp;(bVisible)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				htOption.nDuration&nbsp;=&nbsp;Math.ceil(htOption.nDuration&nbsp;*&nbsp;(this._wel.height()&nbsp;/&nbsp;this._nLayerHeight));
				
				var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onHideTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					width:&nbsp;jindo.Effect.cubicEaseOut(this._nSlideMinWidth),
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nSlideMinHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},
	
	/**
		레이어를&nbsp;unfold하여&nbsp;보여준다.
		레이어의&nbsp;너비를&nbsp;넓히고나서&nbsp;높이를&nbsp;높여&nbsp;접힌것을&nbsp;펴는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;unfold
		@param&nbsp;{Object}&nbsp;[htOption]
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nWidth=1]&nbsp;너비의&nbsp;최소값&nbsp;(px)
			@param&nbsp;{Number}&nbsp;[htOption.nHeight=1]&nbsp;높이의&nbsp;최소값&nbsp;(px)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.unfold();
			oLayerEffect.unfold({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nWidth&nbsp;:&nbsp;1,&nbsp;//너비의&nbsp;최소값&nbsp;(px)
				nHeight&nbsp;:&nbsp;1,&nbsp;//높이의&nbsp;최소값&nbsp;(px)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	unfold&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nWidth&nbsp;:&nbsp;this._nSlideMinWidth,
			nHeight&nbsp;:&nbsp;this._nSlideMinHeight
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible(),
			nWidthDuration,&nbsp;nHeightDuration;
		
		if&nbsp;(!bVisible)&nbsp;{
			this._wel.css({
				width&nbsp;:&nbsp;0,
				height&nbsp;:&nbsp;0
			}).show().width(Math.max(htOption.nWidth,&nbsp;this._nSlideMinWidth)).height(Math.max(htOption.nHeight,&nbsp;this._nSlideMinHeight));
			nWidthDuration&nbsp;=&nbsp;htOption.nDuration&nbsp;/&nbsp;2;
			nHeightDuration&nbsp;=&nbsp;nWidthDuration;
		}&nbsp;else&nbsp;{
			nWidthDuration&nbsp;=&nbsp;(htOption.nDuration&nbsp;/&nbsp;2)&nbsp;*&nbsp;(this._nLayerWidth&nbsp;-&nbsp;this._wel.width())&nbsp;/&nbsp;this._nLayerWidth;
			nHeightDuration&nbsp;=&nbsp;(htOption.nDuration&nbsp;/&nbsp;2)&nbsp;*&nbsp;(this._nLayerHeight&nbsp;-&nbsp;this._wel.height())&nbsp;/&nbsp;this._nLayerHeight;
		}
		
		if&nbsp;(nHeightDuration&nbsp;&gt;&nbsp;0)&nbsp;{
			var&nbsp;self&nbsp;=&nbsp;this;
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				oTransition.attach({
					playing&nbsp;:&nbsp;function(oCustomEvent){
						if&nbsp;(oCustomEvent.nStep&nbsp;===&nbsp;1)&nbsp;{
							this.detach(&quot;playing&quot;,&nbsp;arguments.callee);
							if&nbsp;(!bVisible)&nbsp;{
								self._fireEventAppear();
							}
						}
					},
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this)
				}).queue(nWidthDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					width:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerWidth)
				}).queue(nHeightDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},
	
	/**
		레이어를&nbsp;fold하여&nbsp;숨긴다.
		레이어의&nbsp;높이를&nbsp;줄이고나서&nbsp;너비를&nbsp;줄여&nbsp;접는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;fold
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nWidth=1]&nbsp;너비의&nbsp;최소값&nbsp;(px)
			@param&nbsp;{Number}&nbsp;[htOption.nHeight=1]&nbsp;높이의&nbsp;최소값&nbsp;(px)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.fold();
			oLayerEffect.fold({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nWidth&nbsp;:&nbsp;1,&nbsp;//너비의&nbsp;최소값&nbsp;(px)
				nHeight&nbsp;:&nbsp;1,&nbsp;//높이의&nbsp;최소값&nbsp;(px)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	fold&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nWidth&nbsp;:&nbsp;this._nSlideMinWidth,
			nHeight&nbsp;:&nbsp;this._nSlideMinHeight
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible(),
			nWidthDuration,&nbsp;nHeightDuration;
		
		if&nbsp;(bVisible)&nbsp;{
			nHeightDuration&nbsp;=&nbsp;(htOption.nDuration&nbsp;/&nbsp;2)&nbsp;*&nbsp;this._wel.height()&nbsp;/&nbsp;this._nLayerHeight;
			nWidthDuration&nbsp;=&nbsp;(htOption.nDuration&nbsp;/&nbsp;2)&nbsp;*&nbsp;this._wel.width()&nbsp;/&nbsp;this._nLayerWidth;
			if&nbsp;(nWidthDuration&nbsp;&gt;&nbsp;0)&nbsp;{
				if&nbsp;(this._fireEventBefore(true))&nbsp;{
					var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
					
					oTransition.attach({
						end&nbsp;:&nbsp;jindo.$Fn(this._onHideTransitionEnd,&nbsp;this).bind(this)
					}).queue(nHeightDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
						height:&nbsp;jindo.Effect.cubicEaseOut(Math.max(htOption.nHeight,&nbsp;this._nSlideMinHeight))
					}).queue(nWidthDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
						width:&nbsp;jindo.Effect.cubicEaseOut(Math.max(htOption.nWidth,&nbsp;this._nSlideMinWidth))
					});
					
					if&nbsp;(htOption.fCallback)&nbsp;{
						oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
					}
					oTransition.start();
				}
			}&nbsp;
		}
		return&nbsp;this;
	},
	
	/**
		레이어를&nbsp;pullUp하여&nbsp;보여준다.
		레이어의&nbsp;하단&nbsp;위치는&nbsp;고정되어있고&nbsp;높이값만&nbsp;늘어나&nbsp;끌어올리는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;pullUp
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.pullUp();
			oLayerEffect.pullUp({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	pullUp&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible();
		
		if&nbsp;(Math.ceil(this._wel.height())&nbsp;&lt;&nbsp;this._nLayerHeight)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				this._wel.css(&quot;position&quot;,&nbsp;&quot;absolute&quot;);
				if&nbsp;(!bVisible)&nbsp;{
					this._wel.css({
						&quot;height&quot;&nbsp;:&nbsp;0,
						&quot;top&quot;&nbsp;:&nbsp;parseInt(this._sLayerCSSTop,&nbsp;10)&nbsp;+&nbsp;this._nLayerHeight&nbsp;-&nbsp;this._nSlideMinHeight&nbsp;+&nbsp;&quot;px&quot;
					}).show().height(this._nSlideMinHeight);
				}&nbsp;else&nbsp;{
					htOption.nDuration&nbsp;=&nbsp;Math.ceil(htOption.nDuration&nbsp;*&nbsp;((this._nLayerHeight&nbsp;-&nbsp;this._wel.height())&nbsp;/&nbsp;(this._nLayerHeight&nbsp;-&nbsp;this._nSlideMinHeight)));
				}
				
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				
				oTransition.attach({
					playing&nbsp;:&nbsp;function(oCustomEvent){
						if&nbsp;(oCustomEvent.nStep&nbsp;===&nbsp;1)&nbsp;{
							this.detach(&quot;playing&quot;,&nbsp;arguments.callee);
							if&nbsp;(!bVisible)&nbsp;{
								self._fireEventAppear();
							}
						}
					},
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this)
				}).attach({
					playing&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
						self._wel.css(&quot;top&quot;,&nbsp;parseInt(self._sLayerCSSTop,&nbsp;10)&nbsp;+&nbsp;self._nLayerHeight&nbsp;-&nbsp;self._wel.height()&nbsp;+&nbsp;&quot;px&quot;);
					}
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},
	
	/**
		레이어를&nbsp;pushDown하여&nbsp;숨긴다.
		레이어의&nbsp;하단&nbsp;위치는&nbsp;고정되어있고&nbsp;높이값만&nbsp;줄어들어&nbsp;눌러내리는&nbsp;듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;pushDown
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.pushDown();
			oLayerEffect.pushDown({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	pushDown&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible();
			
		if&nbsp;(bVisible)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				this._wel.css(&quot;position&quot;,&nbsp;&quot;absolute&quot;);
				htOption.nDuration&nbsp;=&nbsp;Math.ceil(htOption.nDuration&nbsp;*&nbsp;(this._wel.height()&nbsp;/&nbsp;this._nLayerHeight));
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				
				oTransition.attach({
					playing&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
						self._wel.css(&quot;top&quot;,&nbsp;parseInt(self._sLayerCSSTop,&nbsp;10)&nbsp;+&nbsp;self._nLayerHeight&nbsp;-&nbsp;self._wel.height()&nbsp;+&nbsp;&quot;px&quot;);
					},
					end&nbsp;:&nbsp;jindo.$Fn(this._onHideTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nSlideMinHeight)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;condense하여&nbsp;보여준다.
		레이어의&nbsp;크기를&nbsp;줄이고&nbsp;투명도를&nbsp;높이는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;condense
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nScale=2]&nbsp;효과&nbsp;시작시&nbsp;레이어의&nbsp;확장배율
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.condense();
			oLayerEffect.condense({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nScale&nbsp;:&nbsp;2,&nbsp;//효과&nbsp;시작시&nbsp;레이어의&nbsp;확장배율
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	condense&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nScale&nbsp;:&nbsp;2
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;bVisible&nbsp;=&nbsp;this._wel.visible()&nbsp;&amp;&amp;&nbsp;this._wel.opacity()&nbsp;&gt;&nbsp;0;
		
		if&nbsp;(bVisible)&nbsp;{
			htOption.nDuration&nbsp;*=&nbsp;((1&nbsp;-&nbsp;this._wel.opacity())&nbsp;/&nbsp;1);
		}&nbsp;else&nbsp;{
			this._wel.opacity(0);
			this._wel.show();
			this._wel.css({
				&quot;left&quot;:&nbsp;(parseInt(this._sLayerCSSLeft,&nbsp;10)&nbsp;-&nbsp;(this._nLayerWidth&nbsp;/&nbsp;2))&nbsp;+&nbsp;&quot;px&quot;,
				&quot;top&quot;:&nbsp;(parseInt(this._sLayerCSSTop,&nbsp;10)&nbsp;-&nbsp;(this._nLayerHeight&nbsp;/&nbsp;2))&nbsp;+&nbsp;&quot;px&quot;,
				&quot;width&quot;:&nbsp;(parseInt(this._sLayerCSSWidth,&nbsp;10)&nbsp;*&nbsp;htOption.nScale)&nbsp;+&nbsp;&quot;px&quot;,
				&quot;height&quot;:&nbsp;(parseInt(this._sLayerCSSHeight,&nbsp;10)&nbsp;*&nbsp;htOption.nScale)&nbsp;+&nbsp;&quot;px&quot;,
				&quot;fontSize&quot;:&nbsp;(parseInt(this._sLayerCSSFontSize,&nbsp;10)&nbsp;*&nbsp;htOption.nScale)&nbsp;+&nbsp;this._sLayerCSSFontSizeUnit&nbsp;
			});
		}
		
		if&nbsp;(htOption.nDuration&nbsp;&gt;&nbsp;0)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				this._wel.css(&quot;position&quot;,&nbsp;&quot;absolute&quot;);
				var&nbsp;self&nbsp;=&nbsp;this,
					elLayer&nbsp;=&nbsp;self.getLayer();
				
				var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
			
				oTransition.attach({
					playing&nbsp;:&nbsp;function(oCustomEvent){
						if&nbsp;(oCustomEvent.nStep&nbsp;===&nbsp;1)&nbsp;{
							this.detach(&quot;playing&quot;,&nbsp;arguments.callee);
							if&nbsp;(!bVisible)&nbsp;{
								self._fireEventAppear();
							}
						}
					},
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					width:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerWidth),
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerHeight)
				},&nbsp;elLayer,&nbsp;{
					&quot;@left&quot;:&nbsp;jindo.Effect.cubicEaseOut(this._sLayerCSSLeft),
					&quot;@top&quot;:&nbsp;jindo.Effect.cubicEaseOut(this._sLayerCSSTop),
					&quot;@fontSize&quot;:&nbsp;jindo.Effect.cubicEaseOut(this._sLayerCSSFontSize),
					&quot;@opacity&quot;:&nbsp;jindo.Effect.linear(1)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;expand하여&nbsp;숨긴다.
		레이어르&nbsp;크기를&nbsp;확장하고&nbsp;투명도를&nbsp;줄이는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;expand
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nScale=2]&nbsp;효과&nbsp;시작시&nbsp;레이어의&nbsp;확장배율
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.expand();
			oLayerEffect.expand({
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nScale&nbsp;:&nbsp;2,&nbsp;//확장할&nbsp;배율
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	expand&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nScale&nbsp;:&nbsp;2
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		if&nbsp;(this._wel.visible()&nbsp;&amp;&amp;&nbsp;this._wel.opacity()&nbsp;&gt;&nbsp;0)&nbsp;{
			if&nbsp;(this._fireEventBefore(true))&nbsp;{
				htOption.nDuration&nbsp;*=&nbsp;((this._wel.opacity())&nbsp;/&nbsp;1);
				this._wel.css(&quot;position&quot;,&nbsp;&quot;absolute&quot;);
				
				if&nbsp;(this._wel.css(&quot;left&quot;)&nbsp;==&nbsp;&quot;auto&quot;)&nbsp;{
					this._wel.css(&quot;left&quot;,&nbsp;this._sLayerCSSLeft);
				}
				if&nbsp;(this._wel.css(&quot;top&quot;)&nbsp;==&nbsp;&quot;auto&quot;)&nbsp;{
					this._wel.css(&quot;top&quot;,&nbsp;this._sLayerCSSTop);
				}
				var&nbsp;oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onHideTransitionEnd,&nbsp;this).bind(this)
				}).queue(htOption.nDuration,&nbsp;this._htTransitionGetterSetter,&nbsp;{
					width:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerWidth&nbsp;*&nbsp;htOption.nScale),
					height:&nbsp;jindo.Effect.cubicEaseOut(this._nLayerHeight&nbsp;*&nbsp;htOption.nScale)
				},&nbsp;this.getLayer(),&nbsp;{
					&quot;@left&quot;:&nbsp;jindo.Effect.cubicEaseOut((parseInt(this._sLayerCSSLeft,&nbsp;10)&nbsp;-&nbsp;(parseInt(this._sLayerCSSWidth,&nbsp;10))&nbsp;/&nbsp;2&nbsp;+&nbsp;&quot;px&quot;)),
					&quot;@top&quot;:&nbsp;jindo.Effect.cubicEaseOut((parseInt(this._sLayerCSSTop,&nbsp;10)&nbsp;-&nbsp;(parseInt(this._sLayerCSSHeight,&nbsp;10))&nbsp;/&nbsp;2&nbsp;+&nbsp;&quot;px&quot;)),
					&quot;@fontSize&quot;:&nbsp;jindo.Effect.cubicEaseOut(parseInt(this._sLayerCSSFontSize,&nbsp;10)&nbsp;+&nbsp;this._sLayerCSSFontSizeUnit,&nbsp;parseInt(this._sLayerCSSFontSize,&nbsp;10)&nbsp;*&nbsp;2&nbsp;+&nbsp;this._sLayerCSSFontSizeUnit),
					&quot;@opacity&quot;:&nbsp;jindo.Effect.linear(0)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},
	
	/**
		레이어를&nbsp;shake하여&nbsp;강조한다.
		레이어를&nbsp;좌우로&nbsp;흔드는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;shake
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nWidth=20]&nbsp;흔들&nbsp;너비&nbsp;(px)
			@param&nbsp;{Number}&nbsp;[htOption.nCount=3]&nbsp;흔들&nbsp;횟수
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.shake();
			oLayerEffect.shake({&nbsp;
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nWidth&nbsp;:&nbsp;20,&nbsp;//흔들&nbsp;너비&nbsp;(px)
				nCount&nbsp;:&nbsp;3,&nbsp;//흔들&nbsp;횟수
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	shake&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nWidth&nbsp;:&nbsp;20,
			nCount&nbsp;:&nbsp;3
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		if&nbsp;(this._wel.visible())&nbsp;{
			if&nbsp;(this._fireEventBefore())&nbsp;{
				this._wel.css(&quot;position&quot;,&nbsp;&quot;absolute&quot;);
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this),
					abort&nbsp;:&nbsp;function(){
						self._wel.css(&quot;left&quot;,&nbsp;this._sLayerCSSLeft);
					}
				}).queue(htOption.nDuration,&nbsp;this.getLayer(),&nbsp;{
					&quot;@left&quot;:&nbsp;jindo.Effect.wave(htOption.nCount)(this._sLayerCSSLeft,&nbsp;htOption.nWidth&nbsp;+&nbsp;&quot;px&quot;)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;blink하여&nbsp;강조한다.
		투명도를&nbsp;지정하여&nbsp;깜빡이는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;blink
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nOpacity=0]&nbsp;투명도&nbsp;(0~1&nbsp;사이의&nbsp;값)
			@param&nbsp;{Number}&nbsp;[htOption.nCount=1]&nbsp;깜빡일&nbsp;횟수
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.blink();
			oLayerEffect.blink({&nbsp;
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nOpacity&nbsp;:&nbsp;0,&nbsp;//투명도&nbsp;(0~1&nbsp;사이의&nbsp;값)
				nCount&nbsp;:&nbsp;1,&nbsp;//깜빡일&nbsp;횟수
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}
			});
	**/
	blink&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nOpacity&nbsp;:&nbsp;0,
			nCount&nbsp;:&nbsp;1
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		if&nbsp;(this._wel.visible())&nbsp;{
			if&nbsp;(this._fireEventBefore())&nbsp;{
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this),
					abort&nbsp;:&nbsp;function(){
						self._wel.opacity(1);
					}
				}).queue(htOption.nDuration,&nbsp;this.getLayer(),&nbsp;{
					&quot;@opacity&quot;:&nbsp;jindo.Effect.wave(htOption.nCount)(1,&nbsp;htOption.nOpacity)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;flicker하여&nbsp;강조한다.
		배경색을&nbsp;지정하여&nbsp;깜빡이는&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;flicker
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.sBackgroundColor=&quot;#ffff00&quot;]&nbsp;지정할&nbsp;배경색&nbsp;ex)&nbsp;&quot;#ffffff&quot;&nbsp;||&nbsp;&quot;rgb(100,&nbsp;100,&nbsp;100)&quot;
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.flicker();
			oLayerEffect.flicker({&nbsp;
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				sBackgroundColor&nbsp;:&nbsp;&quot;#ffff00&quot;,&nbsp;//지정할&nbsp;배경색&nbsp;ex)&nbsp;&quot;#ffffff&quot;&nbsp;||&nbsp;&quot;rgb(100,&nbsp;100,&nbsp;100)&quot;
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}&nbsp;
			});
	**/
	flicker&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			sBackgroundColor&nbsp;:&nbsp;&quot;#ffff00&quot;&nbsp;
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		var&nbsp;sBackgroundFrom&nbsp;=&nbsp;(this._sLayerBGColor&nbsp;==&nbsp;&quot;transparent&quot;&nbsp;||&nbsp;this._sLayerBGColor&nbsp;==&nbsp;&quot;rgba(0,&nbsp;0,&nbsp;0,&nbsp;0)&quot;)&nbsp;?&nbsp;&quot;#ffffff&quot;&nbsp;:&nbsp;this._sLayerBGColor;&nbsp;
		
		if&nbsp;(this._wel.visible())&nbsp;{
			if&nbsp;(this._fireEventBefore())&nbsp;{
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
			
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this),
					abort&nbsp;:&nbsp;function(){
						self._wel.css(&quot;backgroundColor&quot;,&nbsp;self._sLayerBGColor);
					}
				}).queue(htOption.nDuration,&nbsp;this.getLayer(),&nbsp;{
					&quot;@backgroundColor&quot;:&nbsp;jindo.Effect.cubicEaseIn(htOption.sBackgroundColor,&nbsp;sBackgroundFrom)
				}).queue(function(){
					self._wel.css(&quot;backgroundColor&quot;,&nbsp;self._sLayerBGColor);
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	},&nbsp;
	
	/**
		레이어를&nbsp;bounce하여&nbsp;강조한다.
		레이어가&nbsp;위로&nbsp;튀어오르고&nbsp;바운스되는듯한&nbsp;효과를&nbsp;준다.
		
		@method&nbsp;bounce
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=500]&nbsp;효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
			@param&nbsp;{Number}&nbsp;[htOption.nHeight=50]&nbsp;바운스될&nbsp;높이&nbsp;(px)
			@param&nbsp;{Function}&nbsp;[htOption.fCallback]&nbsp;효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;function(){return&nbsp;this;}
		@return&nbsp;{this}
		@example
			oLayerEffect.bounce();
			oLayerEffect.bounce({&nbsp;
				nFPS&nbsp;:&nbsp;30,&nbsp;//효과&nbsp;애니메이션&nbsp;적용&nbsp;fps
				nDuration&nbsp;:&nbsp;500,&nbsp;//효과&nbsp;애니메이션&nbsp;적용시간&nbsp;(ms)
				nHeight&nbsp;:&nbsp;50,&nbsp;바운스될&nbsp;높이&nbsp;(px)
				fCallback&nbsp;:&nbsp;function()&nbsp;{&nbsp;//효과&nbsp;애니메이션이&nbsp;완료된&nbsp;이후에&nbsp;수행될&nbsp;콜백함수
					//this&nbsp;-&gt;&nbsp;LayerEffect의&nbsp;인스턴스
				}&nbsp;
			});
	**/
	bounce&nbsp;:&nbsp;function(htOption)&nbsp;{
		htOption&nbsp;=&nbsp;this._getOption({
			nFPS&nbsp;:&nbsp;30,
			nDuration&nbsp;:&nbsp;500,
			nHeight&nbsp;:&nbsp;50
		},&nbsp;htOption&nbsp;||&nbsp;{});
		
		if&nbsp;(this._wel.visible())&nbsp;{
			if&nbsp;(this._fireEventBefore())&nbsp;{
				this._wel.css(&quot;position&quot;,&nbsp;&quot;absolute&quot;);
				
				var&nbsp;self&nbsp;=&nbsp;this,
					oTransition&nbsp;=&nbsp;this._getTransition().fps(htOption.nFPS).abort().detachAll();
				
				oTransition.attach({
					end&nbsp;:&nbsp;jindo.$Fn(this._onShowTransitionEnd,&nbsp;this).bind(this),
					abort&nbsp;:&nbsp;function()&nbsp;{
						self._wel.css(&quot;top&quot;,&nbsp;self._sLayerCSSTop);
					}
				}).queue(htOption.nDuration&nbsp;/&nbsp;5,&nbsp;this.getLayer(),&nbsp;{
					&quot;@top&quot;:&nbsp;jindo.Effect.easeOut(this._sLayerCSSTop,&nbsp;(parseInt(this._sLayerCSSTop,&nbsp;10)&nbsp;-&nbsp;htOption.nHeight)&nbsp;+&nbsp;&quot;px&quot;)
				}).queue(htOption.nDuration&nbsp;/&nbsp;5&nbsp;*&nbsp;4,&nbsp;this.getLayer(),&nbsp;{
					&quot;@top&quot;:&nbsp;jindo.Effect.bounce(this._sLayerCSSTop)
				});
				
				if&nbsp;(htOption.fCallback)&nbsp;{
					oTransition.queue(jindo.$Fn(htOption.fCallback,&nbsp;this).bind(this));
				}
				oTransition.start();
			}
		}
		return&nbsp;this;
	}
}).extend(jindo.Component);
</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>